<template>
	<div class="home-container">

		<el-row :gutter="15" class="home-card-three">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="home-card-item">
					<div class="home-card-item-title">统计</div>
					<div class="home-monitor">
						<div class="flex-warp">

						</div>
					</div>
				</div>
			</el-col>

		</el-row>
	</div>
</template>

<script lang="ts" setup name="home">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated, onDeactivated, onBeforeMount } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import statsApi from '/@/api/smoke/stats';
import { time } from 'console';

let global: any = {
	homeChartOne: null,
	homeCommunityBar: null,
	homeChartTwo: null,
	homeCharThree: null,
	dispose: [null, '', undefined],
};

const homeLineRef = ref();
const homeCommunityBarRef = ref();
const homePieRef = ref();
const homeBarRef = ref();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
	homeThree: <any>[
		// {
		// 	icon: 'iconfont icon-yangan',
		// 	label: '小区数量',
		// 	value: '41',
		// 	iconColor: '#F72B3F',
		// },
		// {
		// 	icon: 'iconfont icon-wendu',
		// 	label: '设备数量',
		// 	value: '1144',
		// 	iconColor: '#91BFF8',
		// },
		// {
		// 	icon: 'iconfont icon-shidu',
		// 	label: '在线设备',
		// 	value: '903',
		// 	iconColor: '#88D565',
		// },
		// {
		// 	icon: 'iconfont icon-shidu',
		// 	label: '离线设备',
		// 	value: '241',
		// 	iconColor: '#88D565',
		// },
		// {
		// 	icon: 'iconfont icon-zaosheng',
		// 	label: '待审核设备',
		// 	value: '156',
		// 	iconColor: '#FBD4A0',
		// },
		// {
		// 	icon: 'iconfont icon-shidu',
		// 	label: '近10天烟雾/火焰报警设备',
		// 	value: '12',
		// 	iconColor: '#88D565',
		// },
		// {
		// 	icon: 'iconfont icon-zaosheng',
		// 	label: '近10天人员停留数量',
		// 	value: '196',
		// 	iconColor: '#FBD4A0',
		// },
	],
	myCharts: [],
	charts: {
		theme: '',
		bgColor: '',
		color: '#303133',
	},
});

// 折线图 最近10天报警统计
const initLineChart = (oneTitle = <any>[], oneAllData = <any>[], oneFireData = <any>[], onePersonData = <any>[]) => {
	if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
	global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: '近10天报警数量',
			x: 'left',
			textStyle: { fontSize: '15', color: state.charts.color },
		},
		grid: { top: 70, right: 20, bottom: 30, left: 30 },
		tooltip: { trigger: 'axis' },
		legend: { data: ['全部', '火焰/烟雾', '人员停留'], right: 0 },
		xAxis: {
			data: oneTitle,
		},
		yAxis: [
			{
				type: 'value',
				name: '次',
				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
			},
		],

		series: [
			{
				name: '全部',
				type: 'bar',
				symbolSize: 6,
				symbol: 'circle',
				smooth: true,
				data: oneAllData,
				// lineStyle: { color: '#fe9a8b' },
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: 'rgba(108,80,243,0.3)' },
						{ offset: 1, color: 'rgba(108,80,243,0)' },
					]),
					//柱状图圆角
					borderRadius: [10, 10, 0, 0],
				},
				label: {
					show: true,
					position: 'top',
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#fe9a8bb3' },
						{ offset: 1, color: '#fe9a8b03' },
					]),
				},
			},
			{
				name: '火焰/烟雾',
				type: 'line',
				symbolSize: 6,
				symbol: 'circle',
				smooth: true,
				data: oneFireData,
				lineStyle: { color: '#fe9a8b' },
				itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },

				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#fe9a8bb3' },
						{ offset: 1, color: '#fe9a8b03' },
					]),
				},
			},
			{
				name: '人员停留',
				type: 'line',
				symbolSize: 6,
				symbol: 'circle',
				smooth: true,
				data: onePersonData,
				lineStyle: { color: '#9E87FF' },
				itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#9E87FFb3' },
						{ offset: 1, color: '#9E87FF03' },
					]),
				},
				emphasis: {
					itemStyle: {
						color: {
							type: 'radial',
							x: 0.5,
							y: 0.5,
							r: 0.5,
							colorStops: [
								{ offset: 0, color: '#9E87FF' },
								{ offset: 0.4, color: '#9E87FF' },
								{ offset: 0.5, color: '#fff' },
								{ offset: 0.7, color: '#fff' },
								{ offset: 0.8, color: '#fff' },
								{ offset: 1, color: '#fff' },
							],
						},
						borderColor: '#9E87FF',
						borderWidth: 2,
					},
				},
			},
		],
	};
	(<any>global.homeChartOne).setOption(option);
	(<any>state.myCharts).push(global.homeChartOne);
};

// 报警小区排行榜
const initCommunityChart = (titleArr = <any>[], dataArr = <any>[]) => {
	if (!global.dispose.some((b: any) => b === global.homeCommunityBar)) global.homeCommunityBar.dispose();
	global.homeChartOne = <any>echarts.init(homeCommunityBarRef.value, state.charts.theme);
	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: '近10天预警小区TOP',
			x: 'left',
			textStyle: { fontSize: '15', color: state.charts.color },
		},
		grid: { top: 50, right: 50, bottom: 30, left: 10 },

		tooltip: { trigger: 'axis' },
		xAxis: {
			data: dataArr,
			type: 'value',
		},
		yAxis: {
			type: 'category',
			data: titleArr,
			rotate: 90,
			align: 'left',
			verticalAlign: 'middle',
			position: 'insideBottom',
			distance: 15,
			show: false,
		},

		series: {
			// name: '全部',
			type: 'bar',
			data: dataArr,
			itemStyle: {
				color: '#59c4e6',
				borderRadius: [0, 10, 10, 0],
			},
			label: {
				show: true,
				rotate: 0,
				align: 'left',
				verticalAlign: 'middle',
				position: 'insideLeft',
				distance: 10,
				formatter: '{b} ({c})',
				// formatter: '{b}',
				color: '#fff',
				textBorderWidth: 1,
				textBorderColor: '#5ac6e9',
				rich: {
					name: {},
				},
			},
		},
	};
	(<any>global.homeChartOne).setOption(option);
	(<any>state.myCharts).push(global.homeChartOne);
};

// 饼图  '烟雾报警', '人员徘徊'
const initPieChart = (showData = <any>[]) => {
	if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
	global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
	var getname = ['火焰/烟雾', '人员徘徊'];
	var getvalue = showData;

	var data = [];
	for (var i = 0; i < getname.length; i++) {
		data.push({ name: getname[i], value: getvalue[i] });
	}

	const colorList = ['#fe9a8b', '#9E87FF', '#FEC279', '#968AF5', '#E790E8'];
	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: '报警类型占比',
			x: 'left',
			textStyle: { fontSize: '15', color: state.charts.color },
		},
		tooltip: { trigger: 'item', formatter: '{b} <br/> {c}' },
		graphic: {
			elements: [
				{
					type: 'image',
					z: -1,
					style: {
						width: 230,
						height: 230,
					},
					left: '16.5%',
					top: 'center',
				},
			],
		},
		legend: {
			type: 'scroll',
			orient: 'vertical',
			right: '0%',
			left: '65%',
			top: 80,
			itemWidth: 14,
			itemHeight: 14,
			data: getname,
			textStyle: {
				rich: {
					name: {
						fontSize: 14,
						fontWeight: 400,
						width: 200,
						height: 35,
						padding: [0, 0, 0, 60],
						color: state.charts.color,
					},
					rate: {
						fontSize: 15,
						fontWeight: 500,
						height: 35,
						width: 40,
						padding: [0, 0, 0, 30],
						color: state.charts.color,
					},
				},
			},
		},
		series: [
			{
				type: 'pie',
				radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
				center: ['32%', '50%'],
				itemStyle: {
					color: function (params: any) {
						return colorList[params.dataIndex];
					},
				},
				label: { show: false },
				labelLine: { show: false },
				data: data,
			},
		],
	};
	(<any>global.homeChartTwo).setOption(option);
	(<any>state.myCharts).push(global.homeChartTwo);
};


// 获取统计信息
function getStatsData() {
	statsApi.home({}).then((res: any) => {
		let resData = res.data.data;
		// 版本分布
		handleDeviceVersion(resData.versionData);
	});
}


// 处理设备版本
function handleDeviceVersion(versionData = <any>[]) {
	let titleArr = <any>[],
		dataArr = <any>[];

	versionData.forEach((item: any) => {
		titleArr.push(item.version);
		dataArr.push(item.num);
	});

}

// 页面加载时
let timer: any = null;
onMounted(() => {
	getStatsData();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {

});

onDeactivated(() => {
	// clearInterval(timer);
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;

.home-container {
	overflow: hidden;

	.home-card-one,
	.home-card-two,
	.home-card-three {
		.home-card-item {
			width: 100%;
			height: 130px;
			border-radius: 4px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);

			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}

			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;

				i {
					color: var(--el-text-color-placeholder);
				}
			}

			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}

	.home-card-one {
		@for $i from 0 through 3 {
			.home-one-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/10) + s;
			}
		}
	}

	.home-card-two,
	.home-card-three {
		.home-card-item {
			height: 400px;
			width: 100%;
			overflow: hidden;

			.home-monitor {
				height: 100%;

				.flex-warp-item {
					width: 50%;
					height: 111px;
					display: flex;

					.flex-warp-item-box {
						margin: auto;
						text-align: center;
						color: var(--el-text-color-primary);
						display: flex;
						border-radius: 5px;
						background: var(--next-bg-color);
						cursor: pointer;
						transition: all 0.3s ease;

						&:hover {
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
						}
					}

					@for $i from 0 through $homeNavLengh {
						.home-animation#{$i} {
							opacity: 0;
							animation-name: error-num;
							animation-duration: 0.5s;
							animation-fill-mode: forwards;
							animation-delay: calc($i/10) + s;
						}
					}
				}
			}
		}
	}
}
</style>
